<template>
	<div class="details-body">
		<div class="left">
			<van-icon name="arrow-left" @click="back" />
		</div>
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="(item,index) in imgurl.pics2" :key="index"><img @click="addl" :src="item" alt=""></van-swipe-item>
		</van-swipe>
		<div class="item_title">
			<div class="names">{{imgurl.basicInfo.name}}</div>
			<div>{{imgurl.basicInfo.characteristic}}</div>
			<div class="pice">
				<span class="text">低价￥{{imgurl.basicInfo.minPrice}}</span>
				<span>原价￥{{imgurl.basicInfo.originalPrice}}</span>
				<span>库存：{{imgurl.basicInfo.kanjiaPrice}}</span>
			</div>
		</div>
		<div class="main" v-html="imgurl.content"></div>
		<van-action-sheet v-model="show">
			<div class="content">
				<div class="conter_item">
					<div class="content_left"><img :src="imgurl.pics2[0]" alt=""></div>
					<div class="content_right">
						<div>{{imgurl.basicInfo.name}}</div>
						<div class="red">低价￥{{imgurl.basicInfo.minPrice}}</div>
					</div>
				</div>
				<div class="chicun">
					<div>{{imgurl.properties[0].childsCurGoods[0].name}}</div>
					<div>{{imgurl.properties[0].childsCurGoods[1].name}}</div>
				</div>
				<div class="footer">
					<van-stepper v-model="value" />
				</div>
			</div>
		</van-action-sheet>
		<van-goods-action>
			<van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
			<van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
			<van-goods-action-icon icon="star" text="已收藏" :class="{'red': iseatr == true }" @click="star" />
			<van-goods-action-button type="warning" text="加入购物车" @click="show = true" />
			<van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
		</van-goods-action>
	</div>
</template>

<script>
	import {
		ImagePreview
	} from 'vant';
	export default {
		data() {
			return {
				iseatr: false,
				show: false,
				value: 0

			}
		},
		mounted() {
			let id = this.$route.query.id
			this.$store.dispatch('HOME_GETDETAILS', id)
		},
		computed: {
			imgurl() {
				console.log(this.$store.state.gtedetails.imgurl)
				return this.$store.state.gtedetails.imgurl
			},

		},
		methods: {
			star() {
				this.iseatr = !this.iseatr
			},
			back() {
				this.$router.push({
					path: "/"
				})
			},
			onClickIcon() {
				this.$router.push({
					path: "/carts"
				})
			},
			addl() {
				ImagePreview(this.imgurl.pics2);
			},
			onClickButton() {
				console.log('okok，现在就下单啦！')
			}
		},

	}
</script>

<style scoped>
	.details-body {
		background-color: #eee;
		position: relative;
	}

	.red {
		color: red;
	}

	.footer {
		width: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 0rem 0.3rem;
	}

	.left {
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		position: absolute;
		top: 0.5rem;
		left: 0.5rem;
		background-color: aliceblue;
		z-index: 1000;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.van-swipe-item img {
		width: 100%;
		height: 7rem;

	}

	.content {
		width: 100%;

	}

	.conter_item {
		width: 100%;
		height: 2rem;
		box-sizing: border-box;
		padding: 0.2rem -0.3rem;
		display: inline-flex;
		justify-content: space-between;
		border-bottom: 0.01rem solid gray;
	}

	.content_left {
		width: 30%;
		height: 100%;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.content_left img {
		width: 0.7rem;
		height: 0.7rem;
	}

	.content_right {
		width: 70%;
		height: 100%;
		display: inline-flex;
		flex-direction: column;


	}

	.content_right div {
		width: 100%;
		height: 50%;
		display: inline-flex;
		align-items: center;
	}

	.item_title {
		width: 100%;
		height: 2rem;
		box-sizing: border-box;
		padding: 0.1rem;
		display: inline-flex;
		flex-direction: column;
		background-color: #fff;
	}

	.main {
		margin-top: 0.3rem;
		background-color: #fff;
	}

	.main>>>img {
		width: 100% !important;
		height: 100% !important;
	}

	.names {
		width: 100%;
		box-sizing: border-box;
		padding: 0.2rem 0rem;
		font-size: 0.3rem;
	}

	.pice {
		width: 100%;
		margin-top: 0.3rem;
		display: inline-flex;
		justify-content: space-between;
	}

	.text {
		color: red;
		font-size: 0.2rem;
	}

	.chicun {
		width: 100%;
		height: 2rem;
		display: inline-flex;
		justify-content: space-around;
		align-items: center;
	}

	.chicun div {
		padding: 0.2rem;
		border: 0.01rem solid gray;
	}
</style>
